<template>
	<!-- 详情页 -->
	<view class="swiper-container">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" indicator-color="#e6ba3f" indicator-active-color="#ef9cbd"
			:autoplay="true" :interval="3000">
			<swiper-item v-for="item in SwiperData" :key="item.group_id">
				<image :src="item.external_url" class="swiper-image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<!-- 商品详情介绍 -->
		<view style="margin-top: 40rpx;">
			<text style="color: red;font-size: 40rpx;">￥{{DetailsData.line_price_max}}</text>
			<text style="color: #9a9a9a;font-size: 25rpx;margin-left: 400rpx;">已销售{{DetailsData.goods_sales}}件</text>
		</view>
		<view style="font-weight: 600;font-size: 34rpx;margin-top: 40rpx;margin-bottom: 20rpx;">
			{{DetailsData.goods_name}}
		</view>
		<!-- 服务选着 -->
		<view style="text-align: center;margin-top: 28rpx;margin-bottom: 20rpx;background-color: #fafafa;height: 60rpx;"
			@click="OpenDrawer">
			<uni-icons type="checkbox" size="18" color="red" style="margin-right: 10rpx;"></uni-icons><text
				style="margin-right: 30rpx;">七天无理由退货</text>
			<uni-icons type="checkbox" style="margin-right: 10rpx;" size="18"
				color="red"></uni-icons><text>48小时发货</text>
		</view>
		<!-- 抽屉 -->
		<uni-popup ref="showRight" type="bottom" background-color="#fff" :mask-click="true" style="height: 300rpx;">
			<view>
				<uni-icons type="checkbox" size="18" color="red" style="margin-right: 10rpx;"></uni-icons><text
					style="margin-right: 30rpx;">七天无理由退货</text>
				<view style="margin-left: 40rpx;font-size: 22rpx;margin-top: 18rpx;">满足相应的条件时，消费者可申请7天无理由退货
				</view>
			</view>
			<view style="margin-top: 30rpx;">
				<uni-icons type="checkbox" style="margin-right: 10rpx;" size="18"
					color="red"></uni-icons><text>48小时发货</text>
				<view style="margin-left: 40rpx;font-size: 22rpx;margin-top: 18rpx;">
					下单后48小时之内发货
				</view>
			</view>
		</uni-popup>
		<!-- 商品信息图 -->
		<mp-html :content="DetailsData.content"></mp-html>
		<!-- 底部栏点击事件 -->
		<uni-goods-nav class="navStyle" :fill="true" :options="options" :button-group="customButtonGroup"
			@click="onClick" @buttonClick="buttonClick" />
		<!-- 加入购物车抽屉 -->
		<uni-popup class="popupStyle" ref="shopping_trolley" background-color="#fff" type="bottom" mode="base"
			:mask-click="true">
			<view style="display: flex;">
				<image :src="DetailsData.goods_image" mode="" style="width: 220rpx;height: 200rpx;">
				</image>
				<view style="margin-left: 30rpx;margin-top: 80rpx;">
					<view style="color: red;font-size: 42rpx;">￥{{DetailsData.goods_price_min}}</view>
					<view style="margin-top: 10rpx;">库存：{{DetailsData.stock_total}}</view>
				</view>
				<uni-icons @click="closePopup" type="closeempty" size="33rpx" style="margin-left: 220rpx;"></uni-icons>
			</view>
			<view style="display: flex;margin-top: 30rpx;justify-content: space-between;">
				<text>数量</text>
				<view style="display: flex;width: 150rpx;">
					<button class="mini-btn" type="default" size="mini">-</button>
					<input type="number" :value="1"
						style="background-color: #f8f8f8; height: 50rpx;text-align: center;" />
					<button class="mini-btn" type="default" size="mini">+</button>
				</view>
			</view>
			<button style="margin: 25rpx;height: 80rpx;border-radius: 25rpx;background-color: #ff9402;color: #fff;"
				@click="addCart">加入购物车</button>
		</uni-popup>
	</view>
</template>

<script setup>
	//引入api接口
	import {
		goodsDetailApi,
		cartTotalApi,
		addCartApi
	} from '@/apis/detail.js'
	// 引入vue方法
	import {
		ref,
		onMounted
	} from 'vue'
	// 引入uni-app方法
	import {
		onLoad
	} from '@dcloudio/uni-app'

	// onLoad页面进入时执行一次，参数可以拿到通过路由路径传入的参数
	let ids = ref()
	onLoad(({
		id
	}) => {
		ids.value = id
		goodsDetail(id)
		cartTotal()
	})
	// 用于请求详情信息的函数
	const goodsDetail = async (id) => {
		let {
			data
		} = await goodsDetailApi(id)
		DetailsData.value = data.detail
		console.log(DetailsData.value);
		SwiperData.value = data.detail.goods_images
	}
	// 获取详情数据
	let DetailsData = ref({})
	// 用于接收轮播图数据
	let SwiperData = ref([])
	// 页面渲染完成后执行
	onMounted(() => {

	})
	// 底部导航
	let options = ref([{
		icon: 'home',
		text: '首页'
	}, {
		icon: 'cart',
		text: '购物车',
		info: 0
	}])
	// 导航行的左侧点击事件
	const onClick = (e) => {
		// console.log(e.index);
		if (e.index == 0) {
			uni.switchTab({
				url: '/pages/index/index'
			})
		} else if (e.index == 1) {

			uni.switchTab({
				url: '/pages/cart/cart'
			})
		}
	}
	// 导航栏右侧点击按钮
	let shopping_trolley = ref(null)
	const buttonClick = (e) => {
		console.log(e);
		if (e.index == 0) {
			shopping_trolley.value.open()
		}
	}
	// 关闭购物车方法
	const closePopup = () => {
		shopping_trolley.value.close()
	}
	// 购物车数量查询
	const cartTotal = async () => {
		let {
			data
		} = await cartTotalApi()
		options.value[1].info = +data.cartTotal
	}
	// 加入购物车
	const addCart = async () => {
		let res = await addCartApi(ids.value)
		cartTotal()
		uni.showToast({
			title: '加入购物车成功',
			icon: Node
		})
		shopping_trolley.value.close()
	}
	// 抽屉事件
	let showRight = ref(null)
	const OpenDrawer = () => {
		showRight.value.open()
	}
</script>

<style lang="scss">
	.swiper {
		width: 750rpx;
		height: 450rpx;

		.swiper-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.swiper-container ::v-deep {

		// position: relative;
		.navStyle {
			width: 750rpx;
			position: fixed;
			left: 0;
			bottom: 0;

			.uni-tab__cart-button-right-text {
				// margin-left: 50rpx;
				width: 180rpx;
				text-align: center;
			}

			.uni-tab__cart-button-right-text {
				width: 180rpx;
				text-align: center;
			}
		}

		.uni-popup__wrapper {
			margin-top: 20rpx;
			height: 350rpx;
			margin-left: 25rpx;
			font-size: 30rpx;
		}
	}

	// 购物车抽屉
	.popupStyle ::v-deep {
		.uni-popup__wrapper {
			height: 400rpx;
		}

		.mini-btn {
			overflow: hidden;
			width: 10rpx !important;
			height: 50rpx !important;
			font-size: 18rpx;
		}
	}
</style>